<template>
  <div class="image-info">

    <div class="content">
      <div class="upload-image">
        <div class="not-upload" @click="jumpUpload"></div>
      </div>
      <div class="select-list">
        <customInput
          v-for="(item, index) in dataOption"
          :prop="item" :key="index"
          @click.native="handleClick(item)"
        />
      </div>
      <div class="bottom-meun">
        <van-checkbox v-model="checked">本人承诺所提交房源为真实业主委托房源，已取得《业主委托书》等委托文件</van-checkbox>
        <div class="buttons">
          <button class="sava">保存</button>
          <button class="submit" @click="submit">提交</button>
        </div>
      </div>
    </div>

    <transition name="moveR">
			<uploadList v-show="$route.query.page == 'upload'" />
		</transition>

    <van-popup v-model="showPicker"
      @close="closePickwe"
      position="bottom">
      <inputList :option="selected"
        @hidePopup="hidePopup"
      />
      <van-datetime-picker
        :show-toolbar="false"
        v-model="currentDate"
        type="year-month"
        @change="popupChange"
      />
    </van-popup>
    
  </div>
</template>

<script>
import customInput from './customInput'
import inputList from './inputList.vue'
import cloneDeep from 'lodash/cloneDeep'
import uploadList from './uploadList.vue'
import imageTextData from './imageTextDataconfig'
export default {
  data() {
    let { type } = this.$route.query || 'business'
		let dataOption = []
		imageTextData.forEach(item => {
			if (item.apply && item.apply.includes(type)) {
				dataOption.push(item)
			}
		})
    return {
      dataOption,
      selected: {}, 
      checked: true,
      showPicker: false,
      currentDate: new Date()
    }
  },
  components: {
    inputList,
    customInput,
    uploadList
  },
  methods: {
    handleClick(list) {
      if (list.event === 'click') {
				if (list.isReadonly) {
					document.activeElement.blur();
					this.handlePopup(list)
				} 
			}
    },
    jumpUpload() {
      this.$router.push({ query: { page: 'upload'  } })
    },
    handlePopup(list) {
			this.showPicker = true
			this.selected = cloneDeep(list)
		},
    closePickwe() {
			this.$nextTick(() => {
				window.scroll(0, 0)				
			})
    },
    popupChange(picker) {
      let alias = picker.getValues()
			if (this.selected.plugin) {
				alias = this.selected.plugin(alias)
			}
			this.selected.field.forEach((item, index) => {
				if (item.active) {
					item.value = alias
					item.defaultIndexs = picker.getIndexes()
				}
			})
		},
    hidePopup(option) {
			let { id } = option
			option.field.forEach(item => {
				item.isEmpty = !item.value
			})
			this.dataOption.forEach(item => {
				if (item.id === id ) {
					item.field = option.field
				}
			})
			console.log(this.dataOption)
			this.showPicker = false
    },
    submit() {
      if (!this.checked) {
        console.log('请选择同意')
      }
    }
  }
}
</script>

<style lang="less" scoped>

.moveR-enter-active,  .moveR-leave-active {
	transition: all .2s linear;
	transform: translateX(0);
}
.moveR-enter,  .moveR-leave {
	transform: translateX(100%);
}
.moveR-leave-to{
	transform: translateX(100%);
}

.image-info {
  height: 100%;
  font-size: 14px;
  .content {
    height: 100%;
    overflow: auto;
    .upload-image {
      width: 100%;
      height: 212px;
      position: relative;
      background: #F7F9FA;
      .not-upload {
        width: 81px;
        height: 81px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-size: 100%;
        // background-image: url(../../../assets/img/market/upload-icon.png);
      }
    }

    .select-list {
      padding: 0 16px;
    }

    .bottom-meun {
      padding: 0 16px;
      .van-checkbox {
        padding: 20px 0;
        display: flex;
        font-size: 12px;
        /deep/ .van-checkbox__icon {
              transform: scale(0.7);
        }
      }
      .buttons {
        // height: 44px;
        padding: 12px 0;
        overflow: hidden;
        .sava {
          height: 44px;
          width: 106px;
          float: left;
          border: 0;
          border-radius: 6px;
          color: #A1A9B9;
          background: #F2F7FD;
        }
        .submit {
          height: 44px;
          width: 220px;
          float: right;
          color: #fff;
          border: 0;
          border-radius: 6px;
          background: #007AE6;
        }
      }
    }
  }
}

</style>